<template>
    <view class="container p30">
        <view
            class="record-list f-col"
            v-if="record_list.length > 0"
            v-for="(item, index) in record_list"
            :key="index"
        >
            <view class="record-top">
                <view class="train-title fs-32 t-c line1">
                    {{ item.train_title }}
                </view>
                <view class="progress-box mt-10">
                    <progress
                        :percent="item.finish_rate"
                        activeColor="#10AEFF"
                        show-info
                        stroke-width="6"
                    />
                </view>
                <view class="train-target mt-10 f f-bt">
                    <view class="fs-28"> 训练项目：{{ item.train_times }}项目 </view>
                    <view class="fs-28"> 剩余项目：{{ item.unfinish_times }}项目 </view>
                </view>
            </view>
            <view class="line mt-20 mb-20"></view>
            <view class="record-bottom">
                <view
                    class="target-list f f-bt"
                    v-for="(list, index2) in item.train_list"
                    :key="index2"
                >
                    <view class="target-title fs-32 fw-b line1">
                        {{ list.video_title }}
                    </view>
                    <view class="finish-status">
                        <image
                            :src="
                                list.train_status
                                    ? '/static/icon/train_finish.png'
                                    : '/static/icon/train_unfinished.png'
                            "
                        >
                        </image>
                    </view>
                </view>
            </view>
            <view class="line mt-20 mb-20"></view>
            <view class="f f-bt">
                <view class="fs-26 f-col f-c">
                    {{ item.train_status ? '训练视频已上传' : '训练视频未上传' }}
                </view>
                <view v-if="item.train_status" class="detail-button"> 点击查看 </view>
            </view>
        </view>
        <view class="empty-state" v-else>
            <view class="empty-icon">
                <uni-icons type="calendar" size="80" color="#CCCCCC"></uni-icons>
            </view>
            <text class="empty-text fs-32 mt-20">暂无训练记录</text>
            <text class="empty-subtext fs-28 mt-10">开始您的第一次训练吧</text>
        </view>
    </view>
</template>

<script>
import { getTrainRecord } from '@/api/modules/common';

export default {
    data() {
        return {
            page_no: 1,
            page_size: 10,
            record_list: []
        };
    },
    methods: {
        async getTrainRecord() {
            const { data } = await getTrainRecord({
                page_no: this.page_no,
                page_size: this.page_size
            });
            this.record_list = data.list;
        }
    },
    onLoad() {
        this.getTrainRecord();
    }
};
</script>

<style lang="scss">
.container {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: rgba(71, 168, 256, 0.5);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 0;
    background-color: #fff;
    border-radius: 20rpx;
    margin-top: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

    .empty-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 160rpx;
        height: 160rpx;
        background-color: #f5f7fa;
        border-radius: 50%;
    }

    .empty-text {
        color: #666;
    }

    .empty-subtext {
        color: #999;
    }
}

.record-list {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx 50rpx;
    margin-bottom: 30rpx;

    .line {
        border-bottom: 2rpx solid #eee;
    }

    .target-list {
        margin-bottom: 30rpx;

        .target-title {
            height: 50rpx;
            line-height: 50rpx;
            width: 80%;
        }

        .finish-status {
            width: 50rpx;
            height: 50rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }

    .detail-button {
        padding: 10rpx 20rpx;
        background-color: #fd9035;
        border-radius: 50rpx;
        font-size: 26rpx;
        font-weight: bold;
        color: #fff;
    }
}
</style>
